<template>
  <div class="upload-imgs-copm">
    <div class="header-img">
      <input class="inp-img" type="file" name="file" @change="uploadImgs($event,'one')">
      <div class="camera-div-gai">
        <span class="icon-add">+</span>
      </div>
      <img id="imgs1" class="preview" :src="imgUrl1" alt="">
	  </div>
    <div class="header-img-1">
      <input class="inp-img" type="file" name="file" @change="uploadImgs($event,'two')">
      <div class="camera-div-gai">
        <span class="icon-add">+</span>
      </div>
      <img id="imgs2" class="preview" :src="imgUrl2" alt="">
	  </div>
    <div class="header-img-1">
      <input class="inp-img" type="file" name="file" @change="uploadImgs($event,'three')">
      <div class="camera-div-gai">
        <span class="icon-add">+</span>
      </div>
      <img id="imgs3" class="preview" :src="imgUrl3" alt="">
	  </div>
    <div class="header-img-1">
      <input class="inp-img" type="file" name="file" @change="uploadImgs($event,'four')">
      <div class="camera-div-gai">
        <span class="icon-add">+</span>
      </div>
      <img id="imgs4" class="preview" :src="imgUrl4" alt="">
	  </div>
  </div>
</template>

<script>
import axios from 'axios'
import { compress} from 'common/js/util.js'
import { Toast } from 'mint-ui' 
export default {
  data() {
    return {
      imgUrl1:'',
      imgUrl2:'',
      imgUrl3:'',
      imgUrl4:'',
      image1:'',
      image2:'',
      image3:'',
      image4:'',
    }
  },
  props: {
    
  },

  mounted(){
    let token = localStorage.getItem("access_token");
    let params = {"access_token": token}
    console.log(HOST)
    axios.post(HOST + "/Shop/get_shop_info",params).then((res) => {
        res = res.data
        if(res.result == 'success'){
          this.image1 = res.data.image1
          this.image2 = res.data.image2
          this.image3 = res.data.image3
          this.image4 = res.data.image4
         
          let img1 = document.getElementById("imgs1");
          let img2 = document.getElementById("imgs2");
          let img3 = document.getElementById("imgs3");
          let img4 = document.getElementById("imgs4");
          img1.src = this.image1;
          img2.src = this.image2;
          img3.src = this.image3;
          img4.src = this.image4;
        }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
      })
    
  },
  methods: {
    uploadImgs: function (e,type) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)return;
      let img1 = document.getElementById("imgs1");
      let img2 = document.getElementById("imgs2");
      let img3 = document.getElementById("imgs3");
      let img4 = document.getElementById("imgs4");
      let imgs 
      console.log(type)
      switch (type) {
        case 'one':
          imgs = img1
          break;
        case 'two':
          imgs = img2
          break;
        case 'three':
          imgs = img3
          break;
        case 'four':
          imgs = img4
          break;
        default:
          break;
      }
      
      //去上传
      let file = e.target.files[0]; 
      let that = this;
      compress(file, 0.5, function (err, data) {
          if (err) {
              console.log(err);
              return;
          }
          console.log(data)
          let param = new FormData(); //创建form对象
          param.append('file',data);//通过append向form对象添加数据
          param.append('uid',localStorage.getItem("uid"));//添加form表单中其他数据
          //console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          axios.post(HOST + '/Shop/upload',param,config)
          .then(res=>{
            res = res.data;
            let result = res.result
            if(result == "success"){
              console.log(res.data.url);
              //设置头像img
              //var windowURL = window.URL || window.webkitURL;
              //var dataURL = windowURL.createObjectURL(files[0]);
              let imgurl = res.data.url;
              that.$emit('imgurls',imgurl + "#" + type);
              imgs.src = imgurl;
              //imgs.style.zIndex = 11;
            }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
          })
          
      }); 
      
    }
  }
}
</script>

<style lang="stylus">
.upload-imgs-copm
  padding:10px
  .title
    font-size:16px
  .header-img
    height: 70px
    width: 20%
    border-radius: 35px
    margin: 10px 0
    position: relative
    float left
    .inp-img
      height: 70px
      width: 70px
      position: absolute
      top: 0
      left: 0
      z-index: 10
      opacity: 0
    .camera-div-gai
      width: 70px
      height: 70px
      background-color: #fff
      text-align: center
      position: absolute
      top: 0
      left: 0
      z-index: 1
      .icon-add
        display:block
        font-size:40px
        color:#9d9d9d
        margin-top:25px
  .header-img-1
    height: 70px
    width: 20%
    border-radius: 35px
    margin: 10px 0
    position: relative
    margin-left 15px
    float left
    .inp-img
      height: 70px
      width: 70px
      position: absolute
      top: 0
      left: 0
      z-index: 10
      opacity: 0
    .camera-div-gai
      width: 70px
      height: 70px
      background-color: #fff
      text-align: center
      position: absolute
      top: 0
      left: 0
      z-index: 1
      .icon-add
        display:block
        font-size:40px
        color:#9d9d9d
        margin-top:25px
.preview
    width: 70px
    height: 70px
    position: absolute
    top: 0
    left: 0
    z-index:9

</style>